<template>

      <v-card class="mx-auto mt-36" max-width="360" >
        <v-card-title> 注册</v-card-title>
        <v-card-text>
          <v-form ref="form" lazy-validation  >
            <v-text-field v-model="formData.email" :rules="[rules.required]" label="email邮箱"
              name="email"></v-text-field>
            <v-text-field v-model="formData.password" :rules="[rules.required]" type="password" label="密码"
              name="password"></v-text-field>
              <v-text-field v-model="formData.confirmPassword" :rules="[rules.required]" type="password" label="确认密码"
              name="confirmPassword"></v-text-field>
            <div class="flex w-full items-center">
              <div class="mr-2 flex-1" >
                <v-text-field v-model="formData.code" :rules="[rules.required]" filled clearable
                name="code"></v-text-field>
              </div>
              <img  class="w-24 h-12 mb-2" :src="`data:image/gif;base64,${codeImg}`" @click="getCodeImg"></img>
            </div>
          </v-form>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="#FFFFFF" @click="toLogin" text>
              登录账号
            </v-btn>
          </v-card-actions>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn  @click="submit">
            注册
          </v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>

</template>

<script>
import BackageContainer from '../../layout/BackageContainer.vue'
import JcBar from '../../layout/JcBar'
import { mapActions } from 'vuex'
import { getCaptchaImage,register } from '@/api/cloudbase-login.js'

export default {
  name: 'Register',
  components: { JcBar, BackageContainer },
  data () {
    return {
      rules: {
        required: value => !!value || '必填项',
        min: v => v.length >= 8 || 'Min 8 characters',
      },
      formData: {
        email: '',
        password: '',
        confirmPassword:'',
        uuid:'',
        code:''
      },
      codeImg: '',

    }
  },
  mounted () {
    this.getCodeImg()

  },

  methods: {
    ...mapActions("login", ["login"]),
    async submit () {
      const valid = this.$refs.form.validate()
      if (!valid) {
        return
      }


      if(this.formData.confirmPassword != this.formData.password){
        this.$toast.error("两次密码输入不一致")
        return;
      }

      console.log("注册账号",this.formData)
      try {
        this.formData.registerTerminal = 0
        await register(this.formData)
        this.$toast.success("注册成功，请检查邮箱的验证文件链接，点击进行账号激活！")
        this.toLogin()
      } catch (error) {
        this.getCodeImg()
      }
    },
    toLogin () {

      this.$router.replace("/login")

    },
    async getCodeImg () {
      try {
        const res = await getCaptchaImage()
        this.codeImg = res.img
        this.formData.uuid = res.uuid
        this.$toast("注册成功")
      } catch (error) {
        console.log("获取验证码错误-->", error)
      }
    }
  }
}
</script>

<style scoped>

</style>
